<template>
	<view>
		<view>
			<u-navbar :is-back="false" :placeholder="true" title="微聊" :bgColor="'#e9e9ea'" :leftIcon="''" :border="true"
				z-index="10076">
				<view slot="center" style="color: #000;font-size: 30rpx;">
					通讯录
				</view>
				<view class="slot-wrap" slot="right">
					<u-icon name="search" size="24" color="#000" style="margin-right: 15rpx;"
						@click="$u.route({url:'/pages/serch/serch'})"></u-icon>
					<u-icon name="plus-circle" size="20" color="#000" @click="selectShow = !selectShow"></u-icon>
				</view>
			</u-navbar>
		</view>
		<selectInput :list="selectList" :list-key="'name'" v-if="selectShow" :show.sync="selectShow"
			@on-select="checkSelect" @close="closeSelect" />
		<u-index-list :indexList="indexList">

			<view slot="header" class="list">
				<view class="list__item" @click="$u.route({url:'pages/add/addlst'})">
					<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">新的朋友</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">标签</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">朋友圈</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">QQ</text>
				</view>
				<u-line></u-line>
			</view>
			<template v-for="(item, index) in itemArr.list">
				<view>
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list" v-for="(item1, index1) in item" @click="linkto(item1)" :key="index1">
							<view class="list__item">
								<image class="list__item__avatar" :src="item1.url"></image>
								<text class="list__item__user-name">{{item1.name}}</text>
							</view>
							<u-line></u-line>
						</view>
					</u-index-item>
				</view>
			</template>
			<view slot="footer" class="u-safe-area-inset--bottom" style="text-align: center;">
				<text class="list__footer">共{{itemArr.length}}位好友</text>
			</view>
		</u-index-list>
	</view>

</template>

<script>
	const PinyinMatch = require('pinyin-match').default;
	// console.log(PinyinMatch.default)
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		// indexList.push("↑")
		// indexList.push("☆")
		for (let i = 0; i < 26; i++) {
			// if(i%2 == 0){
			indexList.push(String.fromCharCode(charCodeOfA + i))
			// }

		}
		// indexList.push('#')
		return indexList
	}
	export default {
		data() {
			return {
				selectList: [{
					id: '1',
					name: '添加朋友',
					icon: 'man-add-fill'
				}, {
					id: '2',
					name: '扫一扫',
					icon: 'scan'
				}, {
					id: '3',
					name: '收付款',
					icon: 'fingerprint'
				}],
				selectShow: false,
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				list: [
					// {
					// 	Username: "勇往无敌",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "勇往无敌1",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "勇往无敌2",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "_123	`2",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "123	`2",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "&*123	`2",
					// 	Phone: 13412154651
					// },
					// {
					// 	Username: "a&*123	`2",
					// 	Phone: 13412154651
					// }
				]
			}
		},
		created() {
			// this.getdata()
			// this.indexList = this.getABC()
		},
		onShow(e) {
			// console.log(uni.getdata('token'), uni.getdata('userInfo'))
		},
		onLoad() {
			this.list = []
			this.getdata()
		},
		methods: {
			linkto(item){
				console.log(item)
				uni.$u.http.get('/getUsersdetail', {
					params: {
						key: item.uid
					}
				}, {}).then(res => {
					if (res.state == 200) {
						this.$u.route({url:'pages/add/adddetail',params:res.data})
						return;
					}
					// uni.savedata()
					uni.showToast({
						title: res.msg,
						icon: "none",
						mask: true,
						duration: 2000,
					})
				}).catch(err => {
					console.log(err)
				})
				
			},
			showSelect() {
				this.selectShow = !this.selectShow;
			},
			open() {},
			close() {
				this.showtip = false
			},
			//关闭弹窗
			closeSelect() {
				//小程序兼容
				this.selectShow = false;
			},
			//扫码
			checkSelect(index) {
				if (index == 0) {

				}
				if (index == 1) {
					// uni.vibrateLong();

					//扫码
					uni.scanCode({
						success: function(res) {
							// console.log('条码内容：' + res.result);
							this.$u.toast('条码类型:', res.scanType);
						}
					});
				}
			},
			getindexList() {
				const indexList = []
				const charCodeOfA = 'A'.charCodeAt(0)
				for (let i = 0; i < 26; i++) {
					indexList.push(String.fromCharCode(charCodeOfA + i))
				}
				return indexList
			},
			getABC() {
				var indexList = this.getindexList(),
					arr = [];
				// arr.push("↑")
				arr.push("☆")
				for (var j in indexList) {
					let item = indexList[j],
						type = false;
					for (var i in this.list) {
						let o = this.list[i];
						if (typeof(o.Username) == "string") {
							var daata = PinyinMatch.match(o.Username[0], item);
							if (daata && daata[0] == 0 && daata[1] == 0) {
								type = true;
							}
						}
					}
					if (type) {
						arr.push(item)
					}
				}
				// arr.push("#")
				return arr;
			},
			async getdata() {
				this.list = this.$friend;
				this.indexList = this.getABC()
			},
			getnewList() {

			}
		},
		computed: {
			itemArr() {
				var length = 0;
				var newarr = this.indexList.map((item, index) => {
					// console.log(item,index)
					const arr = []
					var type = false;
					for (let i = 0; i < this.list.length; i++) {
						let o = this.list[i].Username;
						if (typeof(o) == "string") {
							var daata = PinyinMatch.match(o[0], item);
							if (daata && daata[0] == 0 && daata[1] == 0) {
								length++;
								arr.push({
									name: o,
									url: this.list[i].Top,
									uid:this.list[i].Userid,
								})
							}
						}
					}
					return arr
				})
				var otherarr = JSON.parse(JSON.stringify(this.list)),
					oldother = [];
				var func = () => {
					for (var js in otherarr) {
						let jso = otherarr[js];
						for (var ks in newarr) {
							let kso = newarr[ks];
							for (var ls in kso) {
								let gsod = kso[ls];
								// console.log(jso.Username +'=='+ gsod.name)
								if (jso.Username == gsod.name) {
									otherarr.splice(js, 1);
									func();
									break;
								}
							}

						}
					}
				}
				func();
				// console.log(otherarr)
				for (var jsh in otherarr) {
					length++;
					let jsok = otherarr[jsh];
					let json = {
						name: jsok.Username,
						url: jsok.Top,
						uid:jsok.Userid,
					}
					oldother.push(json)
				}
				this.indexList.push("#");
				newarr.push(oldother);
				console.log(newarr)
				return {
					list: newarr,
					length
				};
			}
		},
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 0rpx;
	}

	.list {

		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;

			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}

			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}

		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
</style>
